<!-- 设置 -->
<template>
	<div style="background:#f8f8f9">
		<devArticle>
			<Tabs value="name1" style="background:#f8f8f9">
				<TabPane label="系统设置" name="name1">
					<Row :gutter="16" style="margin-bottom:20px">
						<Col span="12">
							<Card style="height:360px">
								<p slot="title">编号方式</p>
								<br>
								<br>
								<RadioGroup v-model="phone">
									<Radio label="apple">
										<span>编号规则1</span>
										<p>根据创建日期自动编号，即年份+月份+日期+三位序号，示例20180713001。</p>
									</Radio>
									<br>
									<br>
									<Radio label="android">
										<span>编号规则2</span>
										<p>根据机构缩写（一级机构账号填写机构基本信息时确定）+年份+四位序号，
示例ZHLX20180001。</p>
									</Radio>
									<br>
									<br>
									<Radio label="windows">
										<span>编号规则3</span>
										<p>项目编号自主填写。</p>
									</Radio>
								</RadioGroup>
							</Card>
						</Col>
						<Col span="12">
							<Card style="height:360px">
								<p slot="title">
									<Row>
										<Col span="12">
											项目审核级数
										</Col>
										<Col span="12" style="text-align:right">
											<Button type="primary">
												添加
											</Button>
										</Col>
									</Row>
								</p>
								<Table border :columns="columns7" :data="data6"></Table>
							</Card>
						</Col>
					</Row>
					<Row>
						<Col span="24">
							<Card>
								<p slot="title">
									<Row>
										<Col span="12">
											工程师库
										</Col>
										<Col span="12" style="text-align:right">
											<Button type="primary">
												添加
											</Button>
											<Button type="error">
												删除
											</Button>
										</Col>
									</Row>
								</p>
								<Table border :columns="columns1" :data="data1"></Table>
							</Card>
						</Col>
					</Row>
					<div style="margin: 10px;overflow: hidden">
						<div style="float: right;">
							<Page :total="100" :current="1" ></Page>
						</div>
					</div>
				</TabPane>
				<TabPane label="安全设置" name="name2">
					<Card :bordered="false">
						<p slot="title">密码修改</p>
						<Row>
							<Col span="12" offset="1">
								<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="100">
									<p class="title">
									登录账户　　18723355112
								</p>
								<br>
								<br>
									<FormItem label="输入原密码" prop="name">
										<Input v-model="formValidate.name" placeholder=""></Input>
									</FormItem>
									<FormItem label="输入新密码" prop="mail">
										<Input v-model="formValidate.mail" placeholder=""></Input>
									</FormItem>
									<FormItem label="确认新密码" prop="newPassword">
										<Input v-model="formValidate.mail" placeholder=""></Input>
									</FormItem>
									<FormItem>
										<Button type="primary" @click="instance('success')">确认</Button>
									</FormItem>
								</Form>
       
							</Col>
						</Row>
					</Card>
				</TabPane>
				<TabPane label="绩效规则" name="name3">
					<Card>
						<p slot="title">绩效规则</p>
						<table width="100%" cellspacing="0" cellpadding="0" border="1">
							<tr>
								<th colspan="2" width="33.3%">
									报告类型
								</th>
								<th  width="33.3%">
									审批部门
								</th>
								<th  width="33.3%">
									绩效
								</th>
							</tr>
							<tr>
								<td rowspan="12">
									一般报告表
								</td>
								
								<td>
									无专项
								</td>
								<td rowspan="4">
									县批
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
									
								</td>
							</tr>
							<tr>
								<td>
									1个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									2个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									3个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									无专项
								</td>
								<td rowspan="4">
									市批
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
									
								</td>
							</tr>
							<tr>
								<td>
									1个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									2个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									3个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									无专项
								</td>
								<td rowspan="4">
									省批
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
									
								</td>
							</tr>
							<tr>
								<td>
									1个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									2个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									3个专项
								</td>
								<td style="">
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td rowspan="4">
									核与辐射报告表
								</td>
								<td>
									无专项
								</td>
								<td rowspan="2">
									市批
								</td>
								<td>
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									1个专项
								</td>
								<td>
									 <p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									无专项
								</td>
								<td rowspan="2">
									省批
								</td>
								<td>
									<p v-if="flag" style="">{{num}}
										  <Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
 <input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									1个专项
								</td>
								<td>
									<p v-if="flag" style="">{{num}}
										<Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
										<input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td rowspan="3"  colspan="2">
									报告书
								</td>
								<td>
									县批
								</td>
								<td>
									<p v-if="flag" style="">{{num}}
										<Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
										<input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									市批
								</td>
								<td>
									<p v-if="flag" style="">{{num}}
										<Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
										<input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td>
									省批
								</td>
								<td>
									<p v-if="flag" style="">{{num}}
										<Icon style="" type="md-create" @click='edit()'/>
									</p>
									<div v-else>
										<input type="text" v-model="num"  @change='input()'> <Icon  type="md-checkmark" @click='save()'/>
									</div>
								</td>
							</tr>
							<tr>
								<td colspan="2">
									规划
								</td>
								<td>
									/
								</td>
								<td>	
									2000
								</td>
							</tr>
							<tr>
								<td colspan="2">
									验收报告
								</td>
								<td>
									/
								</td>
								<td>	
									2000
								</td>
							</tr>
							<tr>
								<td colspan="2">
									后评价
								</td>
								<td>
									/
								</td>
								<td>	
									2000
								</td>
							</tr>
							<tr>
								<td colspan="2">
									跟踪评价
								</td>
								<td>
									/
								</td>
								<td>	
									2000
								</td>
							</tr>
							<tr>
								<td colspan="2">
									现状评估报告
								</td>
								<td>
									/
								</td>
								<td>	
									
								</td>
							</tr>
						</table>
					</Card>
				</TabPane>
			</Tabs>
		</devArticle>
	</div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
		columns1:[
			{
				align:"center",
				title:"序号",
				key:"num",
				width:100
			},
			{
				align:"center",
				title:"姓名",
				key:"name",
			},
			{
				align:"center",
				title:"登记证号",
				key:"djzh",
			},
			{
				align:"center",
				title:"登记类别",
				key:"djlb",
			},
			{
				align:"center",
				title:"现有项目数量",
				key:"xysl",
			},
			{
				align:"center",
				title:"登记有效期",
				key:"djyxq",
			},
			{
				align:"center",
				title:"审核权限",
				key:"shqx",
				  render: (h, params) => {
						return h('div', [
							h('Select', {
								props: {
									type: 'error',
									size: 'small'
								},
								on: {
									click: () => {
										this.remove(params.index)
									}
								}
							})
						]);
					}
			},
			 {
				type: 'selection',
				width: 60,
				align: 'center'
			},
		],
		data1:[
			{
				num:1,
				name:"某某某",
				djzh:"B111602203",
				djlb:"社会服务",
				xysl:"4书  2表",
				djyxq:"2021-02-10"
			},
			{
				num:2,
				name:"某某某",
				djzh:"B111602203",
				djlb:"家庭服务",
				xysl:"4书  2表",
				djyxq:"2021-02-10"
			},{
				num:3
			},{
				num:4
			}
		],
		columns7: [
                    {
						align:"center",
                        title: '公司级别',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Select', {
                                   
                                }),
                            ]);
                        }
                    },
                    {
						align:"center",
                        title: '环评项目审核级数',
						key: 'age',
						 render: (h, params) => {
                            return h('div', [
                                h('Select', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                   
                    {
						align:"center",
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data6: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park'
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park'
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park'
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park'
                    }
                ],
	phone: 'apple',
      flag: true,
      num: "",
      formValidate: {
        name: "",
        mail: "",
        newPassword: ""
      },
      ruleValidate: {
        name: [
          {
            required: true,
            message: "The name cannot be empty",
            trigger: "blur"
          }
        ],
        mail: [
          {
            required: true,
            message: "Mailbox cannot be empty",
            trigger: "blur"
          }
        ],
        newPassword: [
          {
            required: true,
            message: "Mailbox cannot be empty",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    instance(type) {
      const title = "密码修改成功，请重新登录";
      const content = "<p>3s后将自动退出</p>";
      this.$Modal.success({
        title: title,
        content: content
      });
    },
    edit() {
      this.flag = false;
    },
    input() {
      this.flag = true;
    },
    save() {
      this.flag = true;
    }
  }
};
</script>
<style lang="less" src="./compents/My/card.less">
</style>